<script setup lang="ts">
interface IEmit {
  (e: 'popupVisibleChange', visible: boolean): void
}

interface IProps {
  disabled?: boolean
}

defineProps<IProps>()
const emit = defineEmits<IEmit>()
</script>

<template>
  <a-tooltip
    v-bind="$attrs"
    :content-style="{
      borderRadius: '4px',
      padding: '8px 12px',
      fontSize: '12px',
      maxWidth: '400px',
    }"
    :class="{ hidden: disabled }"
    @popup-visible-change="e => emit('popupVisibleChange', e)"
  >
    <slot />
    <template #content>
      <slot name="content" />
    </template>
  </a-tooltip>
</template>

<style scoped lang="scss"></style>
